<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<!--
  组件标签每引用一次都会创建一个新的对象

-->
<div id="app">
    <h3>学生信息展示</h3>
    <student></student>
</div>

<script>
/*
*   创建vue组件时 两个特殊的配置项
*    1. el  组件中没有改配置
*    2. data  一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
*          每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
* */

  let student = {
    template:`
               <div class="box">
                    <h5>姓名：{{name}}</h5>
                    <h5>年龄：{{age}}</h5>
                    <h5>专业：{{major}}</h5>
                     <button @click="addAge">age+1</button>
                </div>
        `,
     data:function (){
        return{
            name:'tom',
            age:20,
            major:'java'
        }
     },
      methods:{
          addAge(){
              this.age++
          }
      }
  }
  let vm = new Vue({
      el:'#app',
      data:{},
      methods:{},
      components:{
        student
      }

    })
</script>
</body>
</html>